<script setup>
import { ref, computed } from 'vue'
import { useRoute } from 'vue-router'
import HelloWorld from './components/HelloWorld.vue'

const active = ref(0)
const route = useRoute()

// 只在指定页面显示底部导航栏
const showTabbar = computed(() => {
  return route.meta.showTabBar === true
})
</script>

<template>
  <div class="app-container">
    <router-view />
    <van-tabbar v-model="active" route v-if="showTabbar">
      <van-tabbar-item to="/" icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item to="/my-registrations" icon="records">挂号</van-tabbar-item>
      <van-tabbar-item to="/medical-records" icon="description">就诊</van-tabbar-item>
      <van-tabbar-item to="/profile" icon="user-o">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
.app-container {
  min-height: 100vh;
  background-color: var(--background-color);
  padding-bottom: 50px;
}

.app-container .van-tabbar {
  background-color: #ffffff;
}
</style>
